<template>
	<view>

		<view class="erweima_box">
			<yz-qr :qrPath.sync="qrPath" :text="ewmtext" :size="qrsize" :quality="quality" :colorDark="colorDark" :colorLight="colorLight"></yz-qr>
		</view>

		<view class="order_list_wrap">
			<view class="order_list_item">
				<view class="order_title u-flex">
					<view class="shop_title u-flex">
						<image :src="BestImgUrl+'/index/Frame.png'"></image>
						<text class="text-Omit">老嫂子蛋糕店（杭州富阳店）</text>
					</view>
				</view>
				<view class="goods_info u-flex">
					<view class="goods_name">
						<view class="title">9.9蛋糕捡漏</view>
						<view class="tags_box">
							<u-tag text="随机搭配" mode="light" size="mini" color="#CCAB01" bg-color="#FAF7E6" border-color="#CCAB01" />
						</view>
					</view>
					<view class="goods_img">
						<image :src="packageimage(packageDetailsImages)" mode="aspectFill"></image>
					</view>
				</view>
				<view class="info_address u-flex">
					<view class="info_address_left">
						<view class="left_2 u-flex"><view>店铺地址：</view><span lass="text-Omit">杭州市富阳区巨利路28号</span></view>
						<view class="left_2 u-flex"><view>领取时间：</view>今日 22:00-22:30</view>
					</view>
					<view class="info_address_right u-flex">
						<view class="right_1">
							<image :src="BestImgUrl+'/PackageDetails/Group 34759.png'"></image>
							<view>导航</view>
						</view>
						<view class="right_1">
							<image :src="BestImgUrl+'/PackageDetails/Group 34758.png'"></image>
							<view>电话</view>
						</view>
					</view>
				</view>
			</view>
		</view>


		<view class="langding_wrap">
			<view class="langding_box" v-if="langdings">
				<u-loading :show="true" size="66" color="#FF4E0D"></u-loading>
			</view>
			<view class="mianban">
				<u-collapse ref="collapseOne" :head-style="headStyle" :arrow="true" :accordion="false">
					<u-collapse-item :open="true">
						<view slot="title" class="zhedie_title" style="padding: 0;">
							<view class="subtitle">
								<view class="daojishi_box">
									<view>请到店核销，领取捡漏</view>
								</view>
							</view>
						</view>
						<view class="sm_box_tiem">
							<view class="buzhoutiao_box">
								<view class="tishi">
									<view>请在今日22:00-22:30前到店用餐核销，</view>
									<view>超时未取的订单无法取消和退款。</view>
								</view>
								<view class="tabs_box">
									<u-tabs :list="Tabslist" :is-scroll="false" :current="TabsCurrent" active-color="#FF4E0D" inactive-color="#333333" @change="Tabschange"></u-tabs>
								</view>
								<view class="erweima" v-if="TabsCurrent == 0">
									<image class="ewm" :src="qrPath"></image>
									<view class="ordersn">订单号：12635265216724172142</view>
									<view class="hxbtn" @click="is_zizhuShow = true">自助核销</view>
								</view>
								<view class="details_info3" v-if="TabsCurrent == 1">
									<view class="list_info_wrap" v-if="goodsData.length != 0">
										<view class="list_item u-flex" v-for="(itemg,indexg) in goodsData" :key="indexg">
											<text>{{itemg.name}}</text>
											<text>（{{itemg.num || '0'}}份）</text>
											<view>¥{{itemg.price || '0.00'}}</view>
										</view>
									</view>
									<view v-else>
										<u-empty text="暂无套餐" mode="favor" font-size="24" icon-size="60"></u-empty>
									</view>
								</view>

							</view>
						</view>
					</u-collapse-item>
				</u-collapse>
			</view>
		</view>
		<view class="Pay_type">
			<view class="type_item u-flex">
				<view class="pay_name u-flex">
					<image :src="BestImgUrl+'/PackageDetails/Frame-3.png'"></image>
					<view class="p_name">
						<view>关注领食惠探店生活</view>
						<view>加入同城探店圈·享受更多福利</view>
					</view>
				</view>
				<view class="choose_icon">去关注</view>
			</view>
		</view>

		<u-popup v-model="is_zizhuShow" mode="center" width="614" border-radius="40" :mask-close-able="false" :closeable="true">
			<view class="tc_wrap">
				<view class="hxwanc">
					<image :src="BestImgUrl+'/MangHe/image 956.png'"></image>
				</view>
				<view class="tc_info">
					<view>核销完成</view>
					<view>
						<span>恭喜您核销完成，对我们的捡漏满意么？留下您的足迹，记录美好瞬间。</span>
					</view>
				</view>
				<view class="tc_btn_box">
					<view class="lijipay">
						<u-button hover-class="none" type="info" shape="circle" :ripple="false" @click="querenwanc()">去评价</u-button>
					</view>
				</view>
			</view>
		</u-popup>
		<view style="height: 30rpx;"></view>
	</view>
</template>

<script>
	const app = getApp();
	import store from '@/public/store.js'
	export default {
		data() {
			return {
				langdings: true,
				order_status: 0,
				BestImgUrl: app.globalData.imgurl,
				headStyle: {
					color: '#333',
					backgroundColor: '#fff',
					borderBottom: '1px solid #f7f7f7',
					padding: '0 20rpx',
					borderRadius: '12px 12px 0 0'
				},
				Tabslist: [{
					name: '套餐核销码'
				}, {
					name: '套餐详情'
				}],
				TabsCurrent: 0,
				Urllink: '',

				action: store.state.baseUrl + '/api/orders/upload',
				fileList: [],
				HeaDers: {
					'authorization': uni.getStorageSync('token')
				},
				fileLiatData3: [],
				FileList3: '', //已上传截图

				//二维码设置
				qrPath: '',
				ewmtext: 'hello',
				qrsize: 200,
				quality: 'L',
				colorDark: '#000000',
				colorLight: '#ffffff',

				orderID: '',
				orderDatas: {},
				shopsData: {},
				packageDetails: {},
				goodsData: [],
				userInfo: {},
				packageDetailsImages: [],
				subject: [],
				
				is_zizhuShow: false,
				myRenZhengData: {
					account: "",
					fans: "",
					likes: "",
					platform_icon: "",
					platform_name: "",
					platform_type: 0
				}
			}
		},
		onLoad(ops) {
			let Details = JSON.parse(decodeURIComponent(ops.data))
			console.log('订单数据', Details)
			//订单ID
			this.orderID = Details.id
		},
		onShow() {
			//获取订单详情
			this.GetDatails()
			//获取我的信息
			this.GetMyinfo()
		},
		onReady() {

		},
		methods: {
			GetDatails() {
				let that = this
				that.$api.GetTanDianOrderDetails({
					order_id: this.orderID,
					// is_new: '1',
					// client: ''
				}).then(res => {
					console.log('订单详情', res.data.result);
					that.orderDatas = res.data.result //订单详情

					//设置订单状态
					/* 
						1待付款
						2已付款
						3已核验（等待上传）
						4待审核（已上传）
						5已完成
						-1已取消(超时、自动)
						-2已驳回（审核失败）
						-3已退款（金额原路返回）
					*/
					that.order_status = res.data.result.status

					that.shopsData = res.data.result.shop //店铺信息
					that.packageDetails = res.data.result.package //套餐数据
					that.goodsData = res.data.result.package.goods //套餐商品
					that.packageDetailsImages = res.data.result.package.images //套餐图片数组
					that.subject = res.data.result.package.shop_subject_ids //热门话题#
					that.myRenZhengData = res.data.result.platform_account

					that.ewmtext = res.data.result.verify_code //设置二维码的值
					that.ChongxinDingyi() //重置面板高度

					setTimeout(() => {
						that.langdings = false
					}, 2000)

				}).catch(err => {
					that.langdings = false
				})
			},
			GetMyinfo() {
				let that = this
				that.$api.GetuserInfo({

				}).then(res => {
					console.log('个人信息', res.data.result);
					that.userInfo = res.data.result
				}).catch(err => {

				})
			},
			Daohang() {
				wx.openLocation({
					latitude: Number(this.shopsData.latitude),
					longitude: Number(this.shopsData.longitude),
					scale: 18,
					name: this.shopsData.name,
					address: this.shopsData.address
				});
			},
			Tel() {
				uni.makePhoneCall({
					phoneNumber: this.shopsData.tel, // 电话号码
					success: function() {
						console.log('拨打电话成功');
					},
					fail: function() {
						console.log('拨打电话失败');
					}
				});
			},
			packageimage(data) {
				return data[0]
			},
			//倒计时计算
			findcountdown(item) {
				const now = new Date().getTime();
				let endTime = new Date(item.end_time).getTime()
				let isend = endTime - now > 0 ? (endTime - now) : 0;
				let seconds = this.$moment(isend).unix();
				console.log('结束时间', seconds)
				return seconds
			},
			Tijiao() {
				let that = this
				if (that.Urllink == '') {
					uni.showToast({
						title: '请输入链接',
						icon: 'none',
						duration: 3000
					})
				} else if (that.FileList3 == '') {
					uni.showToast({
						title: '请上传截图',
						icon: 'none',
						duration: 3000
					})
				} else {
					that.$api.TiJiaoTanDian({
						order_id: that.orderID,
						images: that.FileList3,
						url: that.Urllink
					}).then(res => {
						console.log('提交探店', res.data.result);
						//获取订单详情
						this.GetDatails()
						uni.navigateBack()
					}).catch(err => {
						uni.showToast({
							title: err.data.msg,
							icon: 'none',
							duration: 3000
						});
					})
				}
			},
			querenwanc(){
				let that = this
				uni.navigateTo({
					url: '/subpackageC/pages/MH-Gotoreview/MH-Gotoreview?orderid=' + this.orderID
				})
			},























			//订单号和下单时间上传回调
			// onCchange1(e) {
			// 	let that = this
			// 	uni.hideLoading();
			// 	let resuleok = JSON.parse(e.data)
			// 	console.log('上传截图', resuleok)
			// 	that.FileList3 = resuleok.result.show_path

			// 	//重新定义面板高度
			// 	this.ChongxinDingyi()
			// },
			// onRemove1(e) {
			// 	this.FileList3 = ''
			// },
			
			Upsuccess3(e) {
				this.fileLiatData3.push(e.result.show_path);
				var filelist = this.fileLiatData3.join(",");
				this.FileList3 = filelist;
				console.log('上传的图', this.FileList3)
				//重新定义面板高度
				this.ChongxinDingyi()
			},
			Remove(e) {
				this.fileLiatData3.splice(e, 1)
				//console.log('移除图片',e)
				var filelist = this.fileLiatData3.join(",");
				this.FileList3 = filelist;
			},
			Towode() {
				uni.navigateTo({
					url: '/subpackageA/pages/Certification/Certification'
				})
			},
			Tabschange(index) {
				this.TabsCurrent = index;
				this.ChongxinDingyi()
			},
			ChongxinDingyi() {
				//重新定义面板高度
				// #ifdef APP-PLUS
				setTimeout(() => {
					this.$refs.collapseOne.init();
				}, 500)
				// #endif
				// #ifdef MP-WEIXIN || H5
				this.$nextTick(() => {
					setTimeout(() => {
						this.$refs.collapseOne.init();
					}, 200)
				});
				// #endif
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F4F4F4;
	}

	.langding_wrap {
		position: relative;

		.langding_box {
			background-color: #F4F4F4;
			position: absolute;
			width: 100%;
			height: 3000rpx;
			z-index: 99;
			display: flex;
			align-items: flex-start;
			justify-content: center;
			padding-top: 50rpx;
		}
	}

	.erweima_box {
		position: fixed;
		top: -1000rpx;
		left: -1000rpx;
		z-index: -1;
		opacity: 0;
	}

	.subtitle {
		font-weight: bold;
		font-size: 32rpx;
		padding: 30rpx 0;
		display: flex;
		align-items: center;
		width: 100%;

		span {
			font-weight: initial;
			font-size: 28rpx;
			margin-left: auto;
		}

		.wc_color {
			color: #00A556;
			margin-left: auto;
		}

		.jxz_color {
			color: #FF4910;
			margin-left: 10rpx;
			border: 1px solid #FF4910;
			font-weight: initial;
			border-radius: 200rpx;
			font-size: 28rpx;
			padding: 6rpx 16rpx;
		}

		.noStart_color {
			color: #999999;
			margin-left: auto;
		}
	}

	.sm_box_tiem {
		background-color: #ffffff;
		border-radius: 0 0 20rpx 20rpx;
		padding: 30rpx;

		.buzhoutiao_box {
			.tishi {
				background-color: #FFEDE7;
				padding: 20rpx;
				border-radius: 10rpx;
				color: #FF4E0D;
				font-size: 28rpx;
			}

			.tabs_box {
				margin-top: 24rpx;
			}

			.erweima {
				text-align: center;
				margin-top: 30px;

				.ewm {
					width: 238rpx;
					height: 238rpx;
				}

				.ordersn {
					text-align: center;
					margin: 20rpx 0 0 0;
					font-size: 28rpx;
					color: $zzy-text-color-666666;
				}

				.hxbtn {
					width: 334rpx;
					height: 72rpx;
					text-align: center;
					line-height: 72rpx;
					margin: 30rpx auto 20rpx;
					background-color: #FF4E0D;
					border-radius: 200rpx;
					color: #ffffff;
				}
			}

			.details_info3 {
				background-color: #ffffff;
				border-radius: 24rpx;
				margin: 30rpx 0 0 0;

				.title {
					font-size: 30rpx;
					color: $zzy-text-color-333333;
					font-weight: bold;
					width: 200rpx;
					height: 54rpx;
					margin-bottom: 24rpx;
				}

				.list_info_wrap {
					align-items: center;
					padding: 0 22rpx 0 22rpx;
					margin-top: 20rpx;

					.list_tile {
						color: $zzy-text-color-333333;
						font-weight: bold;
						font-size: 28rpx;
						align-items: center;

						span {
							display: inline-block;
							width: 6rpx;
							height: 6rpx;
							border-radius: 200rpx;
							background-color: $zzy-text-color-999999;
							margin-right: 10rpx;
						}
					}

					.list_item {
						align-items: flex-start;
						margin-top: 12rpx;
						padding-left: 16rpx;

						text:nth-child(1) {
							font-size: 28rpx;
							color: $zzy-text-color-666666;
							flex: 1;
						}

						text:nth-child(2) {
							font-size: 28rpx;
							color: $zzy-text-color-666666;
							margin-left: auto;
						}

						text:nth-child(3) {
							font-size: 28rpx;
							color: $zzy-text-color-666666;
							font-weight: bold;
							margin-left: auto;
						}
					}
				}
			}

			.details_info2 {
				.info_list {
					padding: 0 10rpx 20rpx 10rpx;
					align-items: flex-start;

					view {
						color: $zzy-text-color-333333;
						font-size: 28rpx;
						font-weight: bold;
					}

					span {
						padding: 0 0 0 20rpx;
						color: $zzy-text-color-333333;
						font-size: 28rpx;
						display: inline-block;
						flex: 1;
					}
				}
			}

			.my_info_box {
				border-radius: 24rpx;
				background-color: #F4F4F4;
				padding: 24rpx;

				.title {
					font-size: 28rpx;
					font-weight: 600;
					color: $zzy-text-color-333333;
				}

				.my-info {
					align-items: center;
					background-color: #ffffff;
					padding: 24rpx;
					border-radius: 24rpx;
					margin-top: 24rpx;
					position: relative;

					.pttype {
						position: absolute;
						top: 0;
						left: 0;
						width: 84rpx;
						height: 38rpx;
						z-index: 2;
						display: inline-block;
						background-color: #E54200;
						color: #ffffff;
						font-size: 28rpx;
						text-align: center;
						line-height: 38rpx;
						border-radius: 14rpx 0;
						padding: 0 10rpx;
					}

					.my-tx {
						border-radius: 200rpx;
						width: 96rpx;
						height: 96rpx;
						background-color: #F4F4F4;
					}

					.my-name {
						padding-left: 20rpx;

						view:nth-child(1) {
							font-size: 28rpx;
							color: $zzy-text-color-333333;
							font-weight: bold;
						}

						view:nth-child(2) {
							color: $zzy-text-color-999999;
							font-size: 22rpx;
						}
					}

					.right-icon {
						margin-left: auto;
						border-radius: 200rpx;
						background-color: #FEFBF9;
						width: 64rpx;
						height: 64rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}

			.box_on_wrap {
				margin-top: 52rpx;

				.box_on_title {
					display: flex;
					align-items: center;
					justify-content: space-between;

					view:nth-child(1) {
						color: $zzy-text-color-333333;
						font-size: 28rpx;
						font-weight: bold;
					}

					view:nth-child(2) {
						color: #FF4E0D;
						font-size: 28rpx;
					}
				}

				.tishi_box {
					margin-top: 20rpx;
					text-align: left;
					border-radius: 10rpx;
					padding: 24rpx;
					background-color: #FFEDE7;
					color: #FF4E0D;
					font-size: 28rpx;
				}

				.upload_box {
					margin-top: 20rpx;
					position: relative;
					left: -10rpx;
				}

				.input_box {
					margin-top: 20rpx;
					border-radius: 200rpx;
					border: 1px solid #D9D9D9;
					padding: 4rpx 24rpx;
					background-color: #F9F9F9;
				}
			}
		}
	}

	.subOrder {
		width: 100%;
		height: 88rpx;
		text-align: center;
		line-height: 88rpx;
		margin: 30rpx auto 0;
		background-color: #FF4E0D;
		border-radius: 200rpx;
		color: #ffffff;
	}


















	.order_list_wrap {
		margin-bottom: 30rpx;
		border-radius: 0 0 24rpx 24rpx;
		padding: 16rpx 24rpx 24rpx 24rpx;
		background-color: #ffffff;

		.order_list_item {
			.order_title {
				align-items: center;
				justify-content: space-between;

				.shop_title {
					align-items: center;

					image {
						width: 32rpx;
						height: 32rpx;
						margin-right: 6rpx;
					}

					text {
						color: $zzy-text-color-999999;
						font-size: 28rpx;
						-webkit-line-clamp: 1;
					}
				}

				.status {
					flex: 1;
					text-align: right;
					font-size: 28rpx;

					.color1 {
						color: #FF4E0D;
					}

					.color2 {
						color: #00AA3B;
					}
				}
			}

			.goods_info {
				align-items: flex-start;
				margin-top: 24rpx;

				.goods_img {
					width: 120rpx;
					height: 120rpx;

					image {
						width: 120rpx;
						height: 120rpx;
						border-radius: 16rpx;
					}
				}

				.goods_name {
					padding-right: 16rpx;
					flex: 1;
					margin-bottom: 24rpx;

					.title {
						font-size: 34rpx;
						font-weight: bold;
						color: $zzy-text-color-333333;
					}

					.tags_box {
						margin-top: 16rpx;

						.u-tag {
							margin-right: 10rpx;
						}
					}
				}
			}

			.buzhou_tiao {
				margin-top: 20rpx;
				align-items: center;
				justify-content: space-between;

				.youjian {
					width: 36rpx;
					height: 36rpx;
					margin: 0 10rpx;

					image {
						width: 36rpx;
						height: 36rpx;
					}
				}

				.buzhou_tiao_item {
					flex: 1;
					align-items: center;
					justify-content: center;

					.biaohao {
						width: 26rpx;
						height: 26rpx;
						margin-right: 4rpx;
					}

					.lvse {
						color: #30CC04;
					}

					.huise {
						color: #999999;
					}

					text {
						font-size: 20rpx;
					}
				}
			}

			.info_address {
				align-items: center;
				justify-content: space-between;

				.info_address_left {
					flex: 1;

					.left_1 {
						font-weight: bold;
						font-size: 28rpx;
						align-items: center;
						-webkit-line-clamp: 1;
					}

					.left_2 {
						align-items: center;
						margin-top: 12rpx;
						color: $zzy-text-color-666666;
						font-size: 28rpx;

						.text-Omit {
							-webkit-line-clamp: 1;
						}

						.u-icon {
							margin-right: 10rpx;
						}
					}
				}

				.info_address_right {
					align-items: center;
					justify-content: center;

					.right_1 {
						text-align: center;
						flex: 1;
						margin: 0 0 0 30rpx;

						image {
							width: 56rpx;
							height: 56rpx;
							margin-bottom: 6rpx;
						}

						color: $zzy-text-color-666666;
						font-size: 22rpx;
					}
				}
			}
		}
	}
	.tc_wrap {
		padding: 60rpx 30rpx;
		text-align: center;
		background-image: linear-gradient(to top, #ffffff, #FFEDE7);
		
		.hxwanc {
			image {
				width: 252rpx;
				height: 252rpx;
			}
		}
	
		.wenan {
			color: #999;
			margin-bottom: 20rpx;
		}
	
		.tc_images {
			image {
				width: 252rpx;
				height: 252rpx;
			}
		}
	
		.steup_info {
			text-align: left;
			margin-top: 30rpx;
	
			.yqoiu {
				view:nth-child(1) {
					color: #666;
				}
			}
	
			.yqoiu2 {
				color: #666;
	
				span {
					color: #FE7B20;
				}
			}
		}
	
		.tc_info {
			view:nth-child(1) {
				font-weight: bold;
				font-size: 36rpx;
				margin-bottom: 20rpx;
			}
	
			view:nth-child(2) {
				font-size: 28rpx;
				color: #999;
	
				span {
					color: #333333;
				}
			}
	
			.gif_tu {
				width: 100%;
				height: 524rpx;
				border-radius: 20rpx;
			}
		}
	
		.tc_btn_box {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 252rpx;
			margin: 36rpx auto 0;
			.tc_btn_huise {
				flex: 1;
				margin-right: 12rpx;
				background: linear-gradient(to right, #F7F7F7, 50%, #F7F7F7);
				border-radius: 200rpx;
				padding: 0 0;
				height: 80rpx !important;
				line-height: 80rpx !important;
				text-align: center;
				color: #333333;
			}
	
			.tc_btn_huise_err {
				flex: 1;
				background-image: linear-gradient(to right, #FF4E0D, #FF4E0D) !important;
				color: #fff;
				border-radius: 200rpx;
				padding: 0 0;
				height: 80rpx !important;
				line-height: 80rpx !important;
				text-align: center;
			}
	
			.lijipay1 {
				flex: 1;
				position: relative;
				width: 288rpx;
				margin: 0 20rpx 0 0;
	
				.u-size-default {
					height: 80rpx !important;
					line-height: 80rpx !important;
					background: linear-gradient(to right, #F7F7F7, 50%, #F7F7F7) !important;
					color: #333;
					border: none !important;
				}
				
				.u-hairline-border:after {
					border: none !important;
				}
			}
	
			.lijipay {
				flex: 1;
				position: relative;
				width: 288rpx;
				margin: 0 auto;
	
				.u-size-default {
					height: 80rpx !important;
					line-height: 80rpx !important;
					background-image: linear-gradient(to right, #FF4E0D, #FF4E0D) !important;
					color: #fff;
					border: none !important;
				}
				
				.u-hairline-border:after {
					border: none !important;
				}
			}
		}
	}
	
	.Pay_type {
		margin: 30rpx 0;
		padding: 30rpx;
		background-color: #ffffff;
		border-radius: 24rpx;
		.type_item {
			
			.pay_name {
				align-items: center;
				image {
					width: 94rpx;
					height: 94rpx;
					margin-right: 22rpx;
				}
				.p_name {
					view:nth-child(1){
						font-size: 30rpx;
						font-weight: bold;
					}
					view:nth-child(2){
						color: $zzy-text-color-666666;
						font-size: 28rpx;
					}
				}
			}
			.choose_icon {
				margin-left: auto;
				background-color: #ffffff;
				border: 1px solid #FF4E0D;
				color: #FF4E0D;
				border-radius: 200rpx;
				text-align: center;
				width: 146rpx;
				height: 52rpx;
				line-height: 52rpx;
				font-weight: bold;
				font-size: 28rpx;
			}
		}
	}
</style>